<template>
  <van-popup v-model:show="innerVisible" round position="bottom">
    <div
      class="bg-F5F5F5 rounded-[12px 12px 0 0] pt-15 h-500 flex flex-col relative"
    >
      <svg-icon
        name="icon-shanchuxian"
        :size="14"
        color="#333"
        class="absolute right-15 top-18"
        @click="close"
      />
      <div class="text-17 font-bold text-center">确认订单</div>
      <div class="mt-20 mx-15 p-15 rounded-10 bg-white flex">
        <div class="w-100 h-100 relative rounded-10 overflow-hidden">
          <img
            :src="orderDetailsParams.rechargeProdCover"
            alt="封面"
            class="size-full"
          />
          <div
            class="absolute right-0 bottom-0 h-22 flex justify-center items-center px-6 c-translucent-balck60 text-13 text-white rounded-tl-10"
          >
            套餐权益包
          </div>
        </div>
        <div class="pl-15 flex-grow-1 w-0 text-15">
          {{ orderDetailsParams.rechargeProdName }}
        </div>
        <div class="pl-5">
          <div class="text-15 font-bold text-right">
            ¥{{ orderDetailsParams.priceMoney }}
          </div>
          <div class="text-13 text-999999 text-right">x1</div>
        </div>
      </div>
      <div class="mt-20 mx-15 p-15 rounded-10 bg-white text-14">
        <div class="font-bold pb-6">权益：</div>
        <div
          v-for="(item, index) in orderDetailsParams.rechargeAssetInfoVoList"
          :key="item.assetType"
          class="py-5 flex"
        >
          <span>{{ index + 1 }}、</span>
          <span>{{ ASSET_TYPE_MAP[item.assetType] }}</span>
          <span>{{ item.assetAmount }}个</span>
        </div>
      </div>
      <div
        class="opera-box-shadow mt-auto py-10 px-15 w-full flex items-center bg-white"
      >
        <div class="text-13 flex-grow-1 w-0">
          <span>实付金额</span>
          <span class="pl-5 text-FF4A35 font-bold">¥</span>
          <span class="text-20 text-FF4A35 font-bold">{{
            payMoneySplit(orderDetailsParams.priceMoney).integerPart
          }}</span
          ><span
            v-if="payMoneySplit(orderDetailsParams.priceMoney).decimalPart"
            class="text-FF4A35 font-bold"
            >.{{
              payMoneySplit(orderDetailsParams.priceMoney).decimalPart
            }}</span
          >
        </div>
        <div class="w-180 rounded-24 overflow-hidden">
          <ButtonFooter buttonText="立即购买" @click="confirmBuy" />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { AdRechargeProdListInfoData } from "@/api/NoTrainVideoIntro";
import { ASSET_TYPE_MAP } from "../../constants";
import { payMoneySplit } from "../../utils";
defineOptions({
  name: "SubmitOrderPopup"
});
const props = defineProps({
  // 是否显示
  visible: {
    type: Boolean,
    required: true
  },
  // 订单详情参数
  orderDetailsParams: {
    type: Object as () => AdRechargeProdListInfoData,
    default: () => ({})
  }
});

const emit = defineEmits(["update:visible"]);

// 使用内部变量避免直接修改 prop
const innerVisible = ref(props.visible);

// 监听外部 show 变化
watch(
  () => props.visible,
  val => {
    innerVisible.value = val;
  }
);

// 监听内部变化并通知父组件
watch(innerVisible, val => {
  emit("update:visible", val);
});
// 确认购买
const confirmBuy = () => {
};
// 关闭
const close = () => {
  innerVisible.value = false;
};
</script>

<style scoped lang="less"></style>
